<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/order-confirm.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <style>
        #qrcode {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            display: none;
            /* 默认隐藏 */
        }

        .payment-container {
            text-align: center;
            margin-top: 20px;
            display: none;
            /* 默认隐藏 */
        }

        .payment-container h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .payment-container p {
            color: #666;
            margin-bottom: 10px;
        }

        input {
            margin: 5px 0;
            padding: 8px;
            width: 200px;
        }

        button {
            margin-top: 10px;
            padding: 10px 15px;
        }
    </style>
</head>

<body>
    <main id="app">
        <div class="container" id="app">
            <!-- 确认收货地址 -->
            <section class="section-card">
                <h3>确认收货地址</h3>
                <div class="address-list">
                    <div v-for="(address,index) in addresses" :key="address.id"
                        :class="['address-item', { 'default': address.isDefault, 'selected': index === selectedIndex }]"
                        @click="selectAddress(address,index)">
                        <span v-if="address.isDefault" class="default-tag">默认</span>
                        <p>{{ address.address }}</p>
                        <p>{{ address.name }} {{ address.phone }}</p>
                        <div class="address-actions-overlay">
                            <button class="edit-address-btn" style="color: black;"
                                @click="editAddress(address)">编辑</button>
                        </div>
                    </div>
                </div>
                <div class="address-actions">
                    <a href="#" class="newAddress" @click="openNewAddress">使用新地址</a>
                    <a href="#">管理地址</a>
                </div>
            </section>

            <!-- 确认订单信息 -->
            <section class="section-card">
                <h3>确认订单信息</h3>
                <div class="order-details">
                    <div class="order-items-table">
                        <div class="table-header">
                            <span>商品</span>
                            <span>商品属性</span>
                            <span>原价</span>
                            <span>数量</span>
                            <span>小计</span>
                        </div>
                        <div class="table-row" v-for="item in orderItems" :key="item.commodityId">
                            <div class="item-info">
                                <img class="item-image" :src="item.commodityPicture[0].commodityImageUrl"
                                    :alt="item.productName">
                                <div class="item-details">
                                    <p class="item-name">{{ item.commodityName }}</p>
                                    <!-- 假设后端返回商品属性字段 property -->
                                    <p class="item-tags">{{ item.property }}</p>
                                </div>
                            </div>
                            <div class="item-property">{{ item.productProperty }}</div>
                            <div class="item-price">¥{{ item.commoditySalePrice }}</div>
                            <div class="item-quantity">{{ item.commodityNum }}</div>
                            <div class="item-subtotal">¥{{ (item.commoditySalePrice * item.commodityNum).toFixed(2) }}
                            </div>
                        </div>
                    </div>

                    <div class="order-section notes">
                        <span>订单备注</span>
                        <textarea v-model="orderNotes" placeholder="请输入，付款后商家可见，建议和商家协商一致" maxlength="200"></textarea>
                        <span class="char-count">{{ orderNotes.length }}/200</span>
                    </div>

                    <div class="order-section shipping">
                        <span>配送服务</span>
                        <div>
                            <p>快递 免邮</p>
                            <p>预计后天送达</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 付款详情 -->
            <section class="section-card payment-details-card">
                <h3>付款详情 共 <span>{{ orderItems.length }}</span> 件商品</h3>
                <div class="payment-summary">
                    <p>商品总价 <span>¥{{ orderTotalAmount }}</span></p>
                </div>

                <div class="payment-options">
                    <div class="option-group">
                        <label><input type="checkbox" checked> <span><i class="fas fa-shield-alt"
                                    style="color: orange;"></i> 号码保护中</span></label>
                        <span class="option-label">匿名购买并隐藏真实手机号 ></span>
                    </div>
                </div>

                <div class="final-payment">
                    <span>实付款</span>
                    <span class="amount">¥{{ orderTotalAmount }}</span>
                    <button class="submit-order-btn" @click="submitOrder">提交订单</button>
                </div>
            </section>

        </div>

        <div id="alipay-container" v-html="alipayForm"></div>
        



        <!-- 新建/修改地址模态框 -->
        <!-- 新建地址模态框 -->
        <div id="newAddressModal" class="modal" :style="{ display: showModal ? 'block' : 'none' }">
            <div class="modal-content">
                <span class="close" @click="showModal=false">&times;</span>
                <div class="modal-header">
                    <h3>{{ editMode ? '修改地址' : '新建地址' }}</h3>
                </div>
                <div class="modal-body">
                    <div class="delivery-location">
                        <span>当前配送至</span>
                        <span class="location">中国大陆</span>
                        <a href="#" class="change-location">切换 ></a>
                    </div>
                    <form class="info-form">
                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="addressInfo">地址信息:</label>
                            <div class="address-selects">
                                <select id="provinceSelect" v-model="currentAddress.province"
                                    @change="onProvinceChange">
                                    <option value="">请选择省份</option>
                                    <option v-for="p in provinces" :key="p" :value="p">{{ p }}</option>
                                </select>
                                <select id="citySelect" v-model="currentAddress.city" @change="onCityChange">
                                    <option value="">请选择城市</option>
                                    <option v-for="c in cities" :key="c" :value="c">{{ c }}</option>
                                </select>
                                <select id="districtSelect" v-model="currentAddress.district">
                                    <option value="">请选择区域</option>
                                    <option v-for="d in districts" :key="d" :value="d">{{ d }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="detailedAddress">详细地址:</label>
                            <textarea id="detailedAddress" v-model="currentAddress.address"
                                placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></textarea>
                        </div>
                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="recipientName">收货人姓名:</label>
                            <input type="text" id="recipientName" v-model="currentAddress.name"
                                placeholder="长度不超过25个字符">
                        </div>
                        <div class="form-group phone-group">
                            <span class="required">*</span>
                            <label for="phoneNumber">手机号码:</label>
                            <select id="countryCode" v-model="currentAddress.countryCode">
                                <option value="+86">中国大陆 +86</option>
                            </select>
                            <input type="text" id="phoneNumber" v-model="currentAddress.phone"
                                placeholder="电话号码、手机号码必须填一项">
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="setDefaultAddress" v-model="currentAddress.isDefault">
                                设置为默认收货地址
                            </label>
                        </div>
                        <div class="form-actions">
                            <button class="save-address-btn" type="button" @click="saveAddress">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script src="/js/vue.js"></script>
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/order-confirm.js"></script>

</body>

</html>